<template>
	<el-main>
		<el-card class="box-card" shadow="never">
			<div class="money-list">
				<div class="money-item">
					<span class="money-title">累计结算金额</span>
					<span class="money-font">{{ censusData.settle_amount }}</span>
				</div>
				<div class="money-item">
					<span class="money-title">冻结中的金额</span>
					<span class="money-font">{{ censusData.frozen_amount }}</span>
				</div>
				<div class="money-item">
					<span class="money-title">可提现金额</span>
					<span class="money-font">{{ censusData.left_amount }}</span>
				</div>
				<el-button type="primary" icon="el-icon-plus" style="margin-top: 45px" @click="withdraw">提现</el-button>
			</div>
			<div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 10px;margin-top: 30px"></div>
			<el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleTabClick">
				<el-tab-pane label="结算明细" name="first">
					<div class="search-box">
						<el-form ref="form" :model="searchForm" label-width="80px" :inline="true" >
							<el-form-item label="结算日期">
								<el-date-picker
									v-model="searchForm.date"
									type="daterange"
									value-format="YYYY-MM-DD"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="订单号">
								<el-input v-model="searchForm.order_no" placeholder="订单号" style="width: 300px" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
							</el-form-item>
						</el-form>
					</div>
					<el-table
						:data="tableData"
						:row-style="{ height: '57px'}"
						style="width: 100%;font-size: 12px">
						<el-table-column
							prop="id"
							label="ID">
						</el-table-column>
						<el-table-column
							prop="orderInfo.order_no"
							label="订单号">
							<template #default="scope">
								<p>
									{{ scope.row.orderInfo && scope.row.orderInfo.order_no }}
									<el-icon :size="16" @click="copyText(scope.row.orderInfo && scope.row.orderInfo.order_no)" style="cursor: pointer">
										<component :is="copyIcon"/>
									</el-icon>
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="create_time"
							label="结算日期">
						</el-table-column>
						<el-table-column
							prop="amount"
							label="结算金额">
						</el-table-column>
						<el-table-column
							prop="real_amount"
							label="实际到账">
						</el-table-column>
					</el-table>
					<Pages :form="searchForm" :page-obj="page" @pageChange="pageChangeHandle" @pageJump="getList"></Pages>
				</el-tab-pane>
				<el-tab-pane label="提现记录" name="second">
					<div class="search-box">
						<el-form ref="form" :model="searchForm2" label-width="80px" :inline="true" >
							<el-form-item label="提现日期">
								<el-date-picker
									v-model="searchForm2.date"
									type="daterange"
									value-format="YYYY-MM-DD"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="提现单号">
								<el-input v-model="searchForm2.order_no" placeholder="提现单号" style="width: 300px" clearable></el-input>
							</el-form-item>
							<el-form-item label="打款状态">
								<el-select v-model="searchForm2.status" clearable>
									<el-option label="待审批" value="1" />
									<el-option label="打款中" value="2" />
									<el-option label="打款完成" value="3" />
									<el-option label="打款拒绝" value="4" />
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="search2" icon="el-icon-search">查询</el-button>
							</el-form-item>
						</el-form>
					</div>
					<el-table
						:data="tableData2"
						:row-style="{ height: '57px'}"
						style="width: 100%;font-size: 12px">
						<el-table-column
							prop="id"
							label="ID">
						</el-table-column>
						<el-table-column
							prop="order_no"
							width="220"
							label="提现单号">
							<template #default="scope">
								<p>
									{{ scope.row.order_no }}
									<el-icon :size="16" @click="copyText(scope.row.order_no)" style="cursor: pointer">
										<component :is="copyIcon"/>
									</el-icon>
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="amount"
							label="提现金额">
						</el-table-column>
						<el-table-column
							prop="bank_name"
							label="提现银行">
						</el-table-column>
						<el-table-column
							prop="bank_no"
							label="提现卡号">
						</el-table-column>
						<el-table-column
							prop="remark"
							label="打款备注">
						</el-table-column>
						<el-table-column
							prop="status"
							label="状态">
							<template #default="scope">
								<el-tag v-if="scope.row.status == 1">待审核</el-tag>
								<el-tag v-if="scope.row.status == 2" type="warning">打款中</el-tag>
								<el-tag v-if="scope.row.status == 3" type="success">打款完成</el-tag>
								<el-tag v-if="scope.row.status == 4" type="danger">审核拒绝</el-tag>
							</template>
						</el-table-column>
						<el-table-column
							prop="create_time"
							label="提现日期">
						</el-table-column>
					</el-table>
					<Pages :form="searchForm2" :page-obj="page2" @pageChange="pageChangeHandle2" @pageJump="getList"></Pages>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</el-main>

	<el-dialog title="提现" v-model="dialogVisible" width="500px" destroy-on-close :close-on-click-modal="false">
		<el-form :model="form" ref="ruleForm" label-width="80px">
			<el-form-item label="提现金额" prop="name">
				<el-input v-model="form.amount" type="number" style="width: 150px"></el-input>
				<span style="margin-left: 15px;color: #909399;">最多可提现：{{ censusData.left_amount }}</span>
			</el-form-item>
			<el-form-item label="银行名" prop="name">
				{{ bankInfo.bank_name }}
			</el-form-item>
			<el-form-item label="开户行" prop="name">
				{{ bankInfo.bank_sub_name }}
			</el-form-item>
			<el-form-item label="卡号" prop="name">
				{{ bankInfo.bank_no}}
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="optSubmit()" :loading="loading">确 定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import Pages from "@/components/pages/index.vue";

export default {
	components: {Pages},
	data() {
		return {
			activeName: 'first',
			form: {
				amount: ''
			},
			searchForm: {
				date: '',
				order_no: "",
				page: 1,
				limit: 10
			},
			searchForm2: {
				date: '',
				order_no: "",
				status: '',
				page: 1,
				limit: 10
			},
			tableData: [],
			tableData2: [],
			page: {
				total: 0
			},
			page2: {
				total: 0
			},
			censusData: {},
			copyIcon: 'el-icon-CopyDocument',
			dialogVisible: false,
			loading: false,
			bankInfo: {
				bank_name: '',
				bank_no: '',
				bank_sub_name: ''
			}
		}
	},
	mounted() {
		this.getList()
		this.census()
	},
	methods: {
		// 待结算查询
		search() {
			this.getList()
		},
		search2() {
			this.getWithdrawLog()
		},
		// 结算基础信息
		async census() {
			let res = await this.$API.finance.census.get()
			this.censusData = res.data
		},
		// 获取结算记录
		async getList() {
			let res = await this.$API.finance.list.get(this.searchForm)
			this.tableData = res.data.data
			this.page.total = res.data.total
		},
		pageChangeHandle(page) {
			this.searchForm.page = page
			this.getList()
		},
		pageChangeHandle2(page) {
			this.searchForm2.page = page
			this.getWithdrawLog()
		},
		copyText(text) {
			navigator.clipboard.writeText(text).then(() => {
				this.$message.success('复制成功')
			}).catch(error => {
				console.log('错误', error)
				this.$message.error('复制错误')
			});
		},
		// 监听tab切换
		handleTabClick(tab) {
			if (tab == 'first') {
				this.searchForm.page = 1
				this.getList()
			} else {
				this.searchForm2.page = 1
				this.getWithdrawLog()
			}
		},
		// 获取提现记录
		async getWithdrawLog() {
			let res = await this.$API.finance.withdrawLog.get(this.searchForm2)
			this.tableData2 = res.data.data
			this.page2.total = res.data.total
		},
		// 提现
		async withdraw() {
			let res = await this.$API.system.index.get()
			if (res.data.bank_name == '' || res.data.bank_code == '' || res.data.bank_sub_name == '') {
				this.$message.error('提现银行卡尚未设置，请前往 系统->基础设置->提现设置 配置好');
				setTimeout(() => {
					window.location.href = '/#/system/index'
				}, 1500)
				return;
			}

			this.form.amount = this.censusData.left_amount

			this.bankInfo = res.data
			this.dialogVisible = true
		},
		// 确认提现
		async optSubmit() {
			let res = await this.$API.finance.withdraw.post(this.form)
			if (res.code == 0) {
				this.$message.success(res.msg)
				setTimeout(() => {
					this.dialogVisible = false
					this.census()
				}, 800)
			} else {
				this.$message.error(res.msg)
			}
		}
	}
}
</script>

<style scoped>
.money-list {
	width: 100%;
	height: 60px;
	display: flex;
	margin-left: 40px;
}
.money-list .money-item {
	display: flex;
	flex-direction: column;
	margin-right: 40px;
	padding-top: 20px;
}
.money-title {
	font-size: 14px;
	color: #8c8c8c;
	font-weight: 400;
}
.money-font {
	margin-top: 10px;
	font-size: 22px;
	color: #333;
	font-weight: 400;
}
</style>
